<template>
	<div class="count_wrapper">

		<div class="index-right">
			<el-container>
				<el-main>
					<div class="sales-board-intro">
						<h2 class="title">流量分析</h2>
						<p>是指在获得网站访问量基本数据的情况下对有关数据进行统计、分析，从中发现用户访问网站的规律，并将这些规律与网络营销策略等相结合，从而发现目前网络营销活动中可能存在的问题，并为进一步修正或重新制定网络营销策略提供依据。当然这样的定义是站在网络营销管理的角度来考虑的</p>
					</div>
					<div class="sales-board-form">
						<div class="sales-board-line">
							<div class="sales-board-line-left">
								购买数量：
							</div>
							<div class="sales-board-line-right">
								<div style="margin-top: 20px">
									<v-counter :num='number' @numberBtn='numberFBtn'></v-counter>
								</div>
							</div>
						</div>
						<div class="sales-board-line">
							<div class="sales-board-line-left">
								产品类型：
							</div>
							<div class="sales-board-line-right">
								<v-selection :productLabel='productOptions' @selectValue="anaSelectValue"></v-selection>
							</div>
						</div>
						<div class="sales-board-line">
							<div class="sales-board-line-left">
								有效时间：
							</div>
							<div class="sales-board-line-right">
								<v-selection :productLabel='timeOptions' @selectValue="anaSelectValue"></v-selection>
							</div>
						</div>

						<div class="sales-board-line">
							<div class="sales-board-line-left">
								产品版本：
							</div>
							<div class="sales-board-line-right">
								<el-checkbox-group v-model="checkboxGroup">
									<el-checkbox-button v-for="edition in editions" :label="edition" :key="edition">{{edition}}</el-checkbox-button>
								</el-checkbox-group>
							</div>
						</div>
						<div class="sales-board-line">
							<div class="sales-board-line-left">
								总价：
							</div>
							<div class="sales-board-line-right sales-money">
								6888 元
							</div>
						</div>
						<div class="sales-board-line">
							<div class="sales-board-line-left">&nbsp;</div>
							<div class="sales-board-line-right" @click='sellBth'>
								<el-button type="primary">立即购买</el-button>
							</div>
						</div>
					</div>
				</el-main>
			</el-container>

			<el-container>
				<el-main>
					<div class="sales-board-des">
						<h2 class="explain_title">产品说明</h2>
						<p>网站访问统计分析报告的基础数据源于网站流量统计信息，但其价值远高于原始数据资料。专业的网站访问统计分析报告对网络营销的价值，正如专业的财务分析报告对企业经营策略的价值。</p>

						<h3 class="explain_title">用户行为指标</h3>
						<ul>
							<li>用户行为指标主要反映用户是如何来到网站的、在网站上停留了多长时间、访问了哪些页面等，主要的统计指标包括：</li>
							<li>用户在网站的停留时间；</li>
							<li>用户来源网站（也叫“引导网站”）；</li>
							<li>用户所使用的搜索引擎及其关键词；</li>
							<li>在不同时段的用户访问量情况等。</li>
						</ul>

						<h3 class="explain_title">浏览网站方式</h3>
						<ul>
							<li>用户上网设备类型</li>
							<li>用户浏览器的名称和版本</li>
							<li>访问者电脑分辨率显示模式</li>
							<li>用户所使用的操作系统名称和版本</li>
							<li>用户所在地理区域分布状况等</li>
						</ul>

					</div>
				</el-main>
			</el-container>
		</div>

		<sell-dialog :isShow='isShowDialog' @on-close="closeDialog" :title='title'>
			<div class="table-wrapper">
				<el-table :data="tableData" border height="120" style="width: 100%; margin-top: 20px">
					<el-table-column prop="id" label="ID">
					</el-table-column>
					<el-table-column prop="name" label="姓名">
					</el-table-column>
					<el-table-column prop="number" label="购买数量">
					</el-table-column>
					<el-table-column prop="levelContent" label="产品类型">
					</el-table-column>
					<el-table-column prop="serveTime" label="有效时间">
					</el-table-column>
					<el-table-column prop="checkboxGroup" label="产品版本">
					</el-table-column>
					<el-table-column prop="price" label="价格">
					</el-table-column>
				</el-table>
				<h3 class="buy-dialog-title">请选择银行</h3>
				<bank-chooser @on-change="onChangeBanks"></bank-chooser>
				<div style="display: flex;justify-content: center;margin-top: 20px;" @click="sure_sellBtn">
					<el-button type="primary">确定购买</el-button>
				</div>
			</div>
		</sell-dialog>
	</div>
</template>

<script>
	import VCounter from '../../components/base/counter'
	import VSelection from '../../components/base/selection'
	import SellDialog from '../../components/base/selldialog'
	import BankChooser from '../../components/bankChooser'
	const editionOptions = ['客户版', '代理商版', '专家版'];
	export default {
		data() {
			return {
				timeOptions: [{
					type: 'time',
					value: '0',
					label: '半年'
				}, {
					type: 'time',
					value: '1',
					label: '一年'
				}, {
					type: 'time',
					value: '2',
					label: '两年'
				}, {
					type: 'time',
					value: '3',
					label: '三年'
				}, {
					type: 'time',
					value: '4',
					label: '五年'
				}],
				productOptions: [{
					type: 'level',
					value: '0',
					label: '入门版'
				}, {
					type: 'level',
					value: '1',
					label: '中级版'
				}, {
					type: 'level',
					value: '2',
					label: '高级版'
				}],
				timeValue: 'halfyear',
				number: 1,
				checkboxGroup: ['客户版'],
				editions: editionOptions,
				serveTime: '半年',
				levelContent: '入门版',
				isShowDialog: false,
				title: "购买内容",
				bankId: null,
				tableData: [{
					id: '12970227',
					name: '',
					number: '',
					serveTime: '',
					levelContent: '',
					checkboxGroup: [],
					price: '6888元'
				}]

			}
		},
		methods: {
			anaSelectValue(value, type) {
				if(type == 'time') {
					this.serveTime = value
				} else {
					this.levelContent = value
				}
			},
			//数量
			numberFBtn(value) {
				this.number = value
			},
			closeDialog() {
				this.isShowDialog = false
			},
			sellBth() {
				var username = window.localStorage.getItem('username')
				this.tableData[0].name = JSON.parse(username)
				this.tableData[0].number = this.number
				this.tableData[0].serveTime = this.serveTime
				this.tableData[0].levelContent = this.levelContent
				this.tableData[0].checkboxGroup = this.checkboxGroup
				this.isShowDialog = true
			},
			onChangeBanks(bankObj) {
				this.bankId = bankObj.id
			},
			sure_sellBtn() {
				this.$message({
					message: '恭喜你，购买成功',
					type: 'success'
				})
				this.isShowDialog = false
				this.$router.push({path:'/orderList'})
			}

		},
		components: {
			VCounter,
			VSelection,
			SellDialog,
			BankChooser
		},
	}
</script>

<style scoped="scoped">
	.buy-dialog-title {
		font-size: 16px;
		font-weight: bold;
		margin: 15px;
	}
</style>